import React, {
  useCallback,
  useEffect,
  useInsertionEffect,
  useMemo,
  useState,
  useTransition,
} from "react";
function App() {
  const [inpValue, setInpValue] = useState('')
  const [count, setCount] = useState(100)
  const [isPending,startTransition]=useTransition()
  //startTransition执行时，isPending为true

  return (
    <div>
      <h1 id="title">APP----{inpValue}</h1>

      <input value={inpValue} type="text"
      onChange={(e) => {setInpValue(e.target.value)}}></input>

      <button onClick={() => {
        setInpValue(inpValue + '1')
        
        startTransition(()=>{
          //开启非阻塞模式,又其他数据更新先更新其他数据,空闲再更新自己
          setCount(count + 1)
        })
      }}>点击加1--{count}</button>
      {isPending && <h1>哈哈哈哈哈</h1>}
    </div>
  );
}

export default App;
